<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="户型">
        <el-select v-model="formInline.style" placeholder="户型">
          <el-option label="" value=""></el-option>
          <el-option label="三室两厅一卫" value="三室两厅一卫"></el-option
          ><!--135.69-->
          <el-option label="三室两厅两卫" value="三室两厅两卫"></el-option
          ><!--145.69-->
          <el-option label="三室一厅一卫" value="三室一厅一卫"></el-option
          ><!--125.69-->
          <el-option label="三室一厅两卫" value="三室一厅两卫"></el-option
          ><!--135.69-->
          <el-option label="一室一厅一卫" value="一室一厅一卫"></el-option
          ><!--69.69-->
          <el-option label="两室一厅一卫" value="两室一厅一卫"></el-option
          ><!--89.69-->
          <el-option label="两室两厅一卫" value="两室两厅一卫"></el-option
          ><!--109.69-->
          <el-option label="两室两厅两卫" value="两室两厅两卫"></el-option
          ><!--125.69-->
        </el-select>
      </el-form-item>
      <el-form-item label="朝向">
        <el-select v-model="formInline.direction" placeholder="朝向">
          <el-option label="" value=""></el-option>
          <el-option label="东西朝向" value="东西朝向"></el-option>
          <el-option label="南朝向" value="南朝向"></el-option>
          <el-option label="北朝向" value="北朝向"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单价">
        <el-col :span="10">
          <el-input
            v-model="formInline.minprice"
            placeholder="最低单价"
          ></el-input>
        </el-col>

        <el-col :span="10">
          <el-input
            v-model="formInline.maxprice"
            placeholder="最高单价"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="房号">
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>

      <el-form-item>
        <!-- 查询 -->
        <el-button type="primary" @click="onSubmit"
          ><i class="el-icon-search"></i
        ></el-button>
        <!-- 批量删除 -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="changemany"
        ></el-button>
        <el-button
          type="info"
          icon="el-icon-circle-plus"
          circle
          @click="add"
        ></el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="#" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <!-- 复选框 -->
            <label
              for="label"
              @click="changestate(scope.row.hid)"
              v-if="scope.row.softdel == 1"
            >
              <input type="checkbox" id="label" />
            </label>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="房号" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.hunm }}</span>
        </template>
      </el-table-column>

      <el-table-column label="户型" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.style }}</span>
        </template>
      </el-table-column>

      <el-table-column label="朝向" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.direction }}</span>
        </template>
      </el-table-column>

      <el-table-column label="面积" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.area }}</span>
        </template>
      </el-table-column>

      <el-table-column label="单价" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column label="秒杀房" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.iskill == 1">No</span>
          <span style="margin-left: 10px" v-if="scope.row.iskill == 0"
            >Yes</span
          >
        </template>
      </el-table-column>

      <el-table-column label="状态" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.bstate == 0"
            >未售出</span
          >
          <span style="margin-left: 10px" v-if="scope.row.bstate == 1"
            >已售出</span
          >
          <span style="margin-left: 10px" v-if="scope.row.bstate == 2"
            >预约中</span
          >
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
            v-if="scope.row.softdel == 1"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            v-if="scope.row.softdel == 1"
            >删除</el-button
          >

          <el-button size="mini" type="success" v-if="scope.row.softdel != 1"
            >已删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改房源信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="秒杀房" :label-width="formLabelWidth">
          <el-input v-model="iskill" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增房源信息" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <!--<el-form-item label="房号" :label-width="formLabelWidth">
          <el-input v-model="hunm" autocomplete="off"></el-input>
        </el-form-item>-->
        <el-form-item label="楼号" :label-width="formLabelWidth">
          <el-select v-model="bname1" placeholder="楼号">
            <el-option label="" value=""></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单元号" :label-width="formLabelWidth">
          <el-select v-model="baddr1" placeholder="单元号">
            <el-option label="" value=""></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="层号" :label-width="formLabelWidth">
          <el-select v-model="bdeveloper1" placeholder="层号">
            <el-option label="" value=""></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="户型" :label-width="formLabelWidth">
          <el-select v-model="style" placeholder="户型">
            <el-option label="" value=""></el-option>
            <el-option label="三室两厅一卫" value="三室两厅一卫"></el-option
            ><!--135.69-->
            <el-option label="三室两厅两卫" value="三室两厅两卫"></el-option
            ><!--145.69-->
            <el-option label="三室一厅一卫" value="三室一厅一卫"></el-option
            ><!--125.69-->
            <el-option label="三室一厅两卫" value="三室一厅两卫"></el-option
            ><!--135.69-->
            <el-option label="一室一厅一卫" value="一室一厅一卫"></el-option
            ><!--69.69-->
            <el-option label="两室一厅一卫" value="两室一厅一卫"></el-option
            ><!--89.69-->
            <el-option label="两室两厅一卫" value="两室两厅一卫"></el-option
            ><!--109.69-->
            <el-option label="两室两厅两卫" value="两室两厅两卫"></el-option
            ><!--125.69-->
          </el-select>
        </el-form-item>

        <el-form-item label="朝向" :label-width="formLabelWidth">
          <el-select v-model="direction" placeholder="朝向">
            <el-option label="" value=""></el-option>
            <el-option label="南朝向" value="南朝向"></el-option>
            <el-option label="北朝向" value="北朝向"></el-option>
            <el-option label="东西朝向" value="东西朝向"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="户号" :label-width="formLabelWidth">
          <el-select v-model="num" placeholder="户号">
            <el-option label="" value=""></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="5"></el-option>
          </el-select>
        </el-form-item>

        <!--<el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="area" autocomplete="off"></el-input>
        </el-form-item>-->

        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="开发商" :label-width="formLabelWidth">
          <!-- <el-input v-model="bid" autocomplete="off"></el-input>-->
          <el-select v-model="bid" placeholder="开发商">
            <el-option
              :label="build.bname"
              :value="build.big"
              v-for="build in AllBuild"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sum"
      >
      </el-pagination>
    </div>
  </div>
</template>


<style>
/* 表的颜色 */
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>


<script>
export default {
  created() {
    this.list();
    this.showBuild();
  },
  data() {
    return {
      //搜索数据
      formInline: {
        style: "",
        direction: "",
        minprice: "",
        maxprice: "",
        hunm: "",
      },
      AllBuild: [],
      // 列表展示数据
      tableData: "",

      //复选框id
      hid2: "",
      hids: [],

      //修改房源数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      //新增房源信息
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      // form: {
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   type: [],
      //   resource: "",
      //   desc: "",
      // },
      formLabelWidth: "120px",
      hid: "",
      hunm: "",
      style: "",
      direction: "",
      area: "",
      price: "",
      softdel: "",
      iskill: "",
      bid: "",
      bstate: "",
      bname1: "",
      baddr1: "",
      bdeveloper1: "",
      num: "",
      //分页数据
      current: 1,
      size: 5,
      sum: "", //记录总条数
      //级联菜单数据
      value: [],
      options: [
        {
          value: "1",
          label: "1号楼",
          children: [
            {
              value: "1",
              label: "1单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "2",
              label: "2单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "3",
              label: "3单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
          ],
        },
        {
          value: "2",
          label: "2号楼",
          children: [
            {
              value: "1",
              label: "1单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "2",
              label: "2单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "3",
              label: "3单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
          ],
        },
        {
          value: "3",
          label: "3号楼",
          children: [
            {
              value: "1",
              label: "1单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "2",
              label: "2单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "3",
              label: "3单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
          ],
        },
        {
          value: "4",
          label: "4号楼",
          children: [
            {
              value: "1",
              label: "1单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "2",
              label: "2单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "3",
              label: "3单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
          ],
        },
        {
          value: "5",
          label: "5号楼",
          children: [
            {
              value: "1",
              label: "1单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "2",
              label: "2单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
            {
              value: "3",
              label: "3单元",
              children: [
                {
                  value: "1",
                  label: "1层",
                },
                {
                  value: "2",
                  label: "2层",
                },
                {
                  value: "3",
                  label: "3层",
                },
                {
                  value: "4",
                  label: "4层",
                },
                {
                  value: "5",
                  label: "5层",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.softdel == 1) {
        return "warning-row";
      } else if (row.softdel == 0) {
        return "success-row";
      }
      return "";
    },
    showBuild() {
      this.$axios
        .get("/ever-building/findAll")
        .then((res) => {
          this.AllBuild = res.data;
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //列表展示
    list() {
      let self = this;
      this.$axios
        .post("/ever-house/select/" + this.size + "/" + this.current, {
          hunm: this.formInline.hunm,
          style: this.formInline.style,
          direction: this.formInline.direction,
          minprice: this.formInline.minprice,
          maxprice: this.formInline.maxprice,
          value: this.value,
        })
        .then((res) => {
          this.value = this.formInline.style = this.formInline.minprice = this.formInline.maxprice = this.formInline.direction = this.formInline.hunm =
            "";
          console.log(res), (self.tableData = res.data);
          //分页
          if (res.data.length == 0) {
            self.sum = 0;
          }
          self.sum = res.data[0].sum;
          //将内存中的已经改变状态的rids清空     无法清空
          // self.rids = []
        });
    },
    // 审核一个
    handleDelete(row) {
      let hids = row.hid;
      this.$axios
        .delete("/ever-house/deleteByList?hids=" + hids)
        .then((res) => {
          this.list();
        });
    },
    //审核多个
    changemany() {
      let hids = this.hids;
      this.$axios
        .delete("/ever-house/deleteByList?hids=" + hids)
        .then((res) => {
          this.list();
        });
    },

    //编辑，修改一个人的信息
    handleEdit(row) {
      this.hid = row.hid;
      this.price = row.price;
      this.iskill = row.iskill;
      this.dialogFormVisible = true;
    },
    //确认修改一个人的信息
    handleEditok() {
      this.dialogFormVisible = false;
      let parm = {
        hid: this.hid,
        price: this.price,
        iskill: this.iskill,
      };
      this.$axios.put("/ever-house/updateById", parm).then((res) => {
        this.$message("修改成功");
        this.list();
      });
    },
    //新增员工方法，打开弹窗
    add() {
      this.dialogFormVisible1 = true;
    },
    //新增确认按钮
    handleAddOk() {
      this.dialogFormVisible1 = false;
      let parm = {
        bname1: this.bname1,
        baddr1: this.baddr1,
        bdeveloper1: this.bdeveloper1,
        style: this.style,
        direction: this.direction,
        price: this.price,
        bid: this.bid,
        num: this.num,
      };
      this.$axios.post("/ever-house/save", parm).then((res) => {
        this.num = this.bname1 = this.baddr1 = this.bdeveloper1 = this.style = this.direction = this.price = this.bid =
          "";
        this.$message("添加成功");
        this.list();
      });
    },
    //搜索方法
    onSubmit() {
      this.list();
    },
    //分页
    //每页几条
    handleSizeChange(val) {
      this.size = val;
      this.onSubmit();
    },
    //第一页
    handleCurrentChange(val) {
      this.current = val;
      this.onSubmit();
    },

    //获取复选框中的数据
    changestate(hid) {
      // 判断sid是否已经添加到 sids中
      if (this.hids.find((hid2) => hid2 == hid) > 0) {
        //存在就删除
        this.hids.splice(this.hids.indexOf(hid), 1);
        return;
      }
      this.hids.push(hid);
    },
    //级联菜单
    handleChange(val) {
      if (!val) {
        this.value = 0;
      } else {
        this.value = val.join(",");
      }
      this.onSubmit();
    },
  },
};
</script>